<template>
  <div class="layout-container">
    <el-container>
      <el-header>
        <div class="header-content">
          <div class="logo">后台管理系统</div>
          <div class="user-info">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                <i class="el-icon-user"></i> {{ user.username }} <i class="el-icon-caret-bottom"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item > <span  @click="handleProfile">个人信息  </span></el-dropdown-item>
                <el-dropdown-item><span  @click="handleChangePassword">修改密码</span></el-dropdown-item>
                <el-dropdown-item ><span @click="handleLogout">退出登录</span> </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            :default-active="activeMenu"
            class="el-menu-vertical"
            router
            @open="handleOpen"
            @close="handleClose">
            <el-menu-item index="/">
              <i class="el-icon-s-home"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <el-menu-item index="/users">
              <i class="el-icon-user"></i>
              <span slot="title">用户管理</span>
            </el-menu-item>
            <el-menu-item index="/roles">
              <i class="el-icon-s-custom"></i>
              <span slot="title">角色管理</span>
            </el-menu-item>
            <el-menu-item index="/goods">
              <i class="el-icon-s-goods"></i>
              <span>商品管理</span>
            </el-menu-item>
            <el-menu-item index="/orders">
              <i class="el-icon-s-order"></i>
              <span>订单管理</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeMenu: this.$route.path,
      user: JSON.parse(localStorage.getItem('user') || '{}')
    }
  },
  watch: {
    $route(to) {
      this.activeMenu = to.path;
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleProfile() {
      this.$message.info('个人信息页面开发中');
    },
    handleChangePassword() {
      this.$message.info('修改密码页面开发中');
    },
    handleLogout() {
      console.log('handleLogout 被调用' );
      this.$confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        localStorage.removeItem('token');
        localStorage.removeItem('user');
        this.$router.push('/login');
        this.$message({
          type: 'success',
          message: '退出成功'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出'
        });
      });
    }
  }
}
</script>

<style scoped>
.layout-container {
  height: 100vh;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 20px;
}

.logo {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.user-info {
  cursor: pointer;
}
</style>